import React from 'react';
import { Radio, Button, Spin, message } from 'antd';
import { WeaError, WeaLocaleProvider, WeaSearchGroup, WeaFormItem, WeaInput, WeaTimePicker, WeaInputNumber, WeaSelect, WeaCron, WeaCheckbox } from 'ecCom';
import { observer, inject } from 'mobx-react';
import './index.less';

const getLabel = WeaLocaleProvider.getLabel;

@inject('edcTaskSettingStore')
@observer
export default class TaskSetting extends React.Component {
	constructor(props) {
		super(props);
		this.store = props.edcTaskSettingStore;
		this.store.init(props.appid);
		this.state = {
			showCron: false,
			isSaving: false,
		};
	}

	onChange = (key, defaultvalue) => (value) => {
		const { onChange } = this.store;
		if (key === 'triggerexpression' && defaultvalue) {
			value = defaultvalue;
		}
		onChange(key, value);
	}

	onSave = () => {
		const { nameError, timesetError, expressionError, taskSettingInfo } = this.store;
		const { name, triggerway, timeset, triggerexpression, createtype } = taskSettingInfo;
		if (createtype == '1' && !name) {
			nameError.showError();
			return;
		}
		if (createtype == '1') {
			if (triggerway == '0' && !timeset) {
				timesetError.showError();
				return;
			}
			if (triggerway == '1' && !triggerexpression) {
				expressionError.showError();
				return;
			}
		}
		const { onSave } = this.store;
		this.setState({ isSaving: true });
		onSave().then(() => {
			message.success(getLabel('502231', '保存成功'));
			this.setState({ isSaving: false });
		});
	}

	render() {
		const { hasInit, appName, hasRight, taskSettingInfo, isSaving } = this.store;
		const { name, createtype, triggerway, frequencyt, weekly, datetype, dateset, timeset, triggerexpression, operatorsettype, ispathsplit } = taskSettingInfo;
		const showCron = this.state.showCron;
		const radioStyle = {
			display: 'block',
			height: '30px',
			lineHeight: '30px',
		};
		const options = [
			{ key: '1', selected: true, showname: getLabel('518986', '每日') },
			{ key: '2', selected: false, showname: getLabel('518987', '每周') },
			{ key: '3', selected: false, showname: getLabel('518988', '每月') },
			{ key: '4', selected: false, showname: getLabel('518989', '每季度') },
			{ key: '5', selected: false, showname: getLabel('518990', '每年') },
		];
		const weeks = [
			{ key: '1', selected: true, showname: getLabel('518991', '星期一') },
			{ key: '2', selected: false, showname: getLabel('518992', '星期二') },
			{ key: '3', selected: false, showname: getLabel('518993', '星期三') },
			{ key: '4', selected: false, showname: getLabel('518994', '星期四') },
			{ key: '5', selected: false, showname: getLabel('518995', '星期五') },
			{ key: '6', selected: false, showname: getLabel('518996', '星期六') },
			{ key: '7', selected: false, showname: getLabel('518997', '星期日') },
		];

		return (

			<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@vkcgv1`} spinning={!hasInit}>
				<div className="task-setting">
					<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@hrkzhn`} title={getLabel('502654', '基本信息')} showGroup={true} fontSize={12}>
						<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@eyccdi`}
  label={getLabel('518998', '应用名称')}
  labelCol={{ span: 3 }}
  wrapperCol={{ span: 10 }}
						>
							<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@9xm2q1`} title={appName} value={appName} viewAttr={1} />
						</WeaFormItem>
					</WeaSearchGroup>
					<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@nycegu`} title={getLabel('519002', '周期下发')} showGroup={true} fontSize={12}>
						<div className="form-item">
							<div className="item-label">{getLabel('520439', '是否启用:')}</div>
							<div className="item-field">
								<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@81razn`}
  value={createtype}
  display="switch"
  style={{ display: 'inline' }}
  onChange={this.onChange('createtype')}
								/>
							</div>
						</div>
						{createtype == '1' && <div className="form-item">
							<div className="item-label">{getLabel('520438', '任务名称:')}</div>
							<div className="item-field">
								<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@rvxo0r`}
  style={{ width: 200 }}
  tipPosition="bottom"
  ref={ref => this.store.nameError = ref}
  error={getLabel('507218', '名称为空')}
								>
									<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@77psb5`} title={name}
  value={name}
  onChange={this.onChange('name')}
  helpfulTip={
											`${getLabel('508508', '提示：配置变量可输入动态参数为：')}<br/>${
											getLabel('519564', '1.输入{date}表示当前日期')}<br/>${
											getLabel('519565', '2.输入{time}表示当前时间')}`
										}
  viewAttr={hasRight ? 3 : 1}
									/>
								</WeaError>
							</div>
						</div>}
						{createtype == '1' ? <div className="form-item">
							<div className="item-label">{getLabel('519003', '触发方式:')}</div>
							<div className="item-field">
								<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@njvn0m`} widthMatchOptions={true}
  options={[{
									key: '0',
									selected: true,
									showname: getLabel('519004', '简单规则'),
								}, {
									key: '1',
									selected: false,
									showname: getLabel('519005', '表达式'),
								},
								]}
  style={{ width: 200 }}
  value={triggerway}
  onChange={this.onChange('triggerway')}
  viewAttr={hasRight ? 3 : 1}
								/>
							</div>
						</div>
							: null}
						{createtype == '1' && triggerway == '0' && <div><div className="form-item">
							<div className="item-label">{getLabel('519006', '执行频率:')}</div>
							<div className="item-field">
								<div style={{ whiteSpace: 'nowrap' }}>
									<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@1nxlrq`}
  options={options}
  value={frequencyt}
  detailtype={3}
  onChange={this.onChange('frequencyt')}
  viewAttr={hasRight ? 3 : 1}
									/>
								</div>
							</div>
						</div>
							{frequencyt != '1' ?
								(frequencyt == '2' ? <div className="form-item">
									<div className="item-label">{getLabel('519007', '日期设置:')}</div>
									<div className="item-field">
										<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@8ibkc6`} style={{ width: 90 }}
  options={weeks}
  value={weekly}
  onChange={this.onChange('weekly')}
  viewAttr={hasRight ? 3 : 1}
										/>
									</div></div>
									:
									<div className="form-item">
										<div className="item-label">{getLabel('519007', '日期设置:')}</div>
										<div className="item-field">
											<div style={{ whiteSpace: 'nowrap' }}>
												<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@d28gf3`} style={{ width: 60 }}
  options={[
													{ key: '0', selected: true, showname: getLabel('519008', '正数') },
													{ key: '1', selected: true, showname: getLabel('519009', '倒数') }]}
  value={datetype}
  onChange={this.onChange('datetype')}
												/>
												<span className="ml10 mr10">{getLabel('519010', '第')}</span>
												<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@fq8gd9`} style={{ width: 60 }}
  value={dateset ? Math.max(1, Number(dateset)) : 1}
  min={1}
  max={366}
  onChange={this.onChange('dateset')}
												/>
												<span className="ml10">{getLabel('502660', '天')}</span>
											</div></div></div>)
								: null}
							<div className="form-item">
								<div className="item-label">{getLabel('519011', '时间设置:')}</div>
								<div className="item-field">
									<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@iqlidw`} style={{ width: 200 }}
  tipPosition="bottom"
  ref={ref => this.store.timesetError = ref}
  error={getLabel('519045', '时间设置为空')}
									>
										<WeaTimePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaTimePicker@ddn5vz`}
  value={timeset}
  formatPattern={3}
  style={{ width: 100 }}
  onChange={this.onChange('timeset')}
  viewAttr={hasRight ? 3 : 1}
										/></WeaError>
								</div>
							</div></div>}
						{createtype == '1' && triggerway == '1' && <div className="form-item">
							<div className="item-label">{getLabel('519012', '表达式:')}</div>
							<div className="item-field">
								<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@ev19ii`}
  tipPosition="bottom"
  ref={ref => this.store.expressionError = ref}
  error={getLabel('519046', '表达式为空')}
								>
									<div>
										<nobr>
											<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@d2s9fl`} value={triggerexpression || '* * * * * ?'} onChange={this.onChange('triggerexpression')} />
											<div style={{ display: 'inline-block' }}>
												<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gotijf`} onClick={() => this.setState({ showCron: !showCron })}>{getLabel('502283', '设置')}</Button>
												<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vznegi`} onClick={this.onChange('triggerexpression', '* * * * * ?')} style={{ marginLeft: 10 }}>{getLabel('506012', '重置')}</Button>
											</div>
										</nobr>
										<div id="scheduleCronexpr" style={{ position: 'absolute', border: '1px solid #d9d9d9', marginTop: 10, zIndex: 1, backgroundColor: 'white', padding: '20px 25px 0', display: showCron ? 'block' : 'none' }}>
											<div>{getLabel('519566', 'Cron表达式生成器')}</div>
											<div style={{ width: 450, height: 400 }}>
												<WeaCron ecId={`${this && this.props && this.props.ecId || ''}_WeaCron@pxrp5o`}
  cronExpression={triggerexpression}
  onChange={this.onChange('triggerexpression')}
												/>
											</div>
										</div>
									</div>
								</WeaError>
							</div>
						</div>}
					</WeaSearchGroup>
					<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@b6sf2c`} title={getLabel('522669', '发起时指定根节点操作者')} showGroup={true} fontSize={12}>
						<div className="form-item">
							<div className="item-label">{getLabel('520439', '是否启用:')}</div>
							<div className="item-field">
								<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@4axcya`}
  value={operatorsettype}
  display="switch"
  style={{ display: 'inline' }}
  onChange={this.onChange('operatorsettype')}
								/>
							</div>
						</div>
					</WeaSearchGroup>
					<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@nqyqgi`} title={getLabel('522670', '任务路径仅展示上下级节点')} showGroup={true} fontSize={12}>
						<div className="form-item">
							<div className="item-label">{getLabel('520439', '是否启用:')}</div>
							<div className="item-field">
								<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@30xmx2`}
  value={ispathsplit}
  display="switch"
  style={{ display: 'inline' }}
  onChange={this.onChange('ispathsplit')}
								/>
							</div>
						</div>
					</WeaSearchGroup>
					<div className="setting-btn">
						<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x2l5md`} type="primary"
  icon={isSaving && 'loading'}
  onClick={this.onSave}
						>
							{getLabel('502312', '保存')}
						</Button>
					</div>
				</div>
			</Spin >
		);
	}
}
